<template>
    <div class="body" v-loading="loading.status">

        <div class="table_content">

            <div class="table_filtrate">
                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        商务
                    </div>
                    <el-select v-model="tableParams.business_uid" clearable size="mini" placeholder="请选择"
                        :filterable="true" class="inp" @change="changeSelectBusinessuid">
                        <el-option v-for="item in business_select" :key="item.id" :label="item.nickname"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        机构
                    </div>
                    <el-select placeholder="请选择" clearable size="mini" v-model="tableParams.o_id" :filterable="true"
                        class="inp" no-data-text="请先选择商务">
                        <el-option v-for=" item in organization_select" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        助贷类型
                    </div>
                    <el-select placeholder="助贷类型" clearable size="mini" v-model="tableParams.loan_type"
                        :filterable="true" class="inp" no-data-text="请先选择商务">
                        <el-option label="全国" value="nationwide">
                        </el-option>
                        <el-option label="地区" value="region">
                        </el-option>
                    </el-select>
                </div>
                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        推送状态
                    </div>
                    <el-select placeholder="推送状态" clearable size="mini" v-model="tableParams.push_status"
                        :filterable="true" class="inp" no-data-text="推送状态">
                        <el-option label="开启" value="1">
                        </el-option>
                        <el-option label="关闭" value="0">
                        </el-option>
                    </el-select>
                </div>
                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        进件状态
                    </div>
                    <el-select placeholder="推送状态" clearable size="mini" v-model="tableParams.entry_status"
                        :filterable="true" class="inp" no-data-text="进件状态">
                        <el-option label="开启" value="1">
                        </el-option>
                        <el-option label="关闭" value="0">
                        </el-option>
                    </el-select>
                </div>

                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        搜索
                    </div>
                    <el-input class="input_fuzzy_search input " size="mini" placeholder="模糊搜索 ID|名字"
                        v-model="tableParams.fuzzy_search" clearable>
                    </el-input>
                </div>

                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        计划名称
                    </div>
                    <el-input class="input_fuzzy_search input " size="mini" placeholder="计划名称"
                        v-model="tableParams.plan_name" clearable>
                    </el-input>
                </div>

                <div class="tf_item" style="margin-right: 30px;">
                    <div class="tag">
                        状态
                    </div>
                    <el-select placeholder="状态" clearable size="mini" v-model="tableParams.status" :filterable="true"
                        class="inp" no-data-text="进件状态">
                        <el-option label="全部" value="all">
                        </el-option>
                        <el-option label="正常" value="normal">
                        </el-option>
                        <el-option label="废弃" value="stop">
                        </el-option>
                    </el-select>
                </div>

                <div class="tf_item">
                    <el-button @click="loadTableData" type="primary" plain>搜索</el-button>
                </div>
            </div>

            <div class="table_operate">
                <el-button class="btn_add" type="primary" @click="handleToGoCreate">添加</el-button>
            </div>

            <el-table class="table" :data="tableData.data" :row-class-name="tableRowClassName">
                <el-table-column prop="id" label="ID" width="60">
                </el-table-column>
                <el-table-column prop="createtime" label="日期" width="60">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-link class="handle" type="warning" v-show="scope.row.status == 'stop'"
                            @click="handleTableRegain(scope.$index, scope.row)">恢复</el-link>
                        <el-link class="handle" type="primary" v-show="scope.row.status == 'normal'"
                            @click="handleTableEdit(scope.$index, scope.row)">编辑</el-link>
                        <el-link class="handle" type="danger" v-show="scope.row.status == 'normal'"
                            @click="handleTableDelete(scope.$index, scope.row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleTableSizeChange" @current-change="handleTableCurrentChange"
                :current-page="currentPage4" :page-sizes="$pageSize" :page-size="tableParams.size"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
            </el-pagination>

        </div>


    </div>
</template>

<script>
import {
  apiAgentList,
  apiGroupList,
  apiAgentCreate,
  apiAgentUpdate,
} from "@/api/apiCommon";
import { apiOrganizationSelects } from '@/api/apiOrganization'
import { apiFinanceOblistpage } from '@/api/apiClue'
import { paramsDeleteNull } from '@/utils/common'
export default {
    name: "Index",
    data() {
        return {
            tableParams: {
                page: 1,
                size: 15,
                status: 'all'
            },
            tableData: {
                current_page: 1,
                data: [],
                last_page: 1,
                per_page: "15",
                total: 0
            },
            currentPage4: 1,
            business_select: [],
            organization_select: [],
            fromViewCofing: {
                input_width: '120px',
                label_width: '120px',
            },
            loading: {
                status: false,
                loadingCount: 0
            },
        };
    },
    created() {
        this.reqApiAgent();
        this.loadTableData();
    },
    methods: {
        // 列表请求
        loadTableData() {
            const _this = this;
            loading_start(this);
            var tableParamsData = { ..._this.tableParams }
            // tableParamsData = paramsDeleteNull(tableParamsData, 'business_uid');
            // tableParamsData = paramsDeleteNull(tableParamsData, 'o_id');
            // tableParamsData = paramsDeleteNull(tableParamsData, 'fuzzy_search');
            // tableParamsData = paramsDeleteNull(tableParamsData, 'loan_type');
            // tableParamsData = paramsDeleteNull(tableParamsData, 'push_status');
            // tableParamsData = paramsDeleteNull(tableParamsData, 'entry_status');
            apiFinanceOblistpage(tableParamsData)
                .then((response) => {
                    const result = response;
                    _this.tableData = result.data.datalist;
                    loading_end(this);
                })
                .catch(function (result) {
                    _this.$message.error(result.msg);
                    _this.tableData.data = null;
                });
        },
        //获取商务人员
        reqApiAgent() {
            const _this = this;
            loading_start(this);
            apiAgentList({
                page: 1,
                size: 99,
                status: 'normal',
                group_id: 3
            })
                .then((response) => {
                    const result = response.data.datalist.data;
                    _this.business_select = result;
                    loading_end(this);
                });
        },
        // 获取机构列表
        reqApiOrganization(business_uid) {
            const _this = this;
            loading_start(this);
            apiOrganizationSelects({
                page: 1,
                size: 99,
                business_uid: business_uid
            }).then((response) => {
                const result = response.data;
                _this.organization_select = result.selects;
                loading_end(this);
            })
        },
        //切换商务人员
        changeSelectBusinessuid(business_uid) {
            this.tableParams.o_id = '';
            this.reqApiOrganization(business_uid)
        },
        // 页面跳转
        handleToGoCreate() {
            this.$router.push({ path: '/product/create', query: { id: 0 } })
        },
        // 表格行状态
        tableRowClassName({ row, rowIndex }) {
            if (row['status'] == 'stop') {
                return "discard-row";
            }
        },
        // 表格操作
        handleTableEdit(index, row) {
            this.$router.push({ path: '/product/update', query: { id: row.id } })
        },
        // 表格恢复
        handleTableRegain(index, row) {
            var _this = this;
            var params = {
                id: row.id,
                status: 'normal'
            }
            loading_start(this);
            apiProductUpdatePart(params).then((response) => {
                loading_end(this);
                _this.loadTableData();
            })
        },
        // 表格删除
        handleTableDelete(index, row) {
            const _this = this;
            loading_start(this);
            apiProductDelete({
                id: row.id
            })
                .then((response) => {
                    this.$message({
                        message: response.msg,
                        type: 'success'
                    });
                    loading_end(this);
                    _this.loadTableData();
                });
        },
        // 数量改变
        handleTableSizeChange(val) {
            this.tableParams.size = val;
            this.loadTableData();
        },
        // 页数改变
        handleTableCurrentChange(val) {
            this.tableParams.page = val;
            this.loadTableData();
            // console.log(`当前页: ${val}`);
        },
        // 部分状态改变
        tableUpdateItem(item) {
            var _this = this;
            var params = {
                id: item.id,
                push_status: item.push_status,
                entry_status: item.entry_status
            }
            loading_start(this);
            apiProductUpdatePart(params).then((response) => {
                loading_end(this);
            })
        },
        // 开始加载
        loading_start() {
            const _this = this;
            if (_this.loading.loadingCount === 0) {
                // 显示加载状态
                _this.loading.status = true;
            }
            _this.loading.loadingCount += 1;
        },
        // 停止加载
        loading_end() {
            const _this = this;
            if (_this.loading.loadingCount > 0) {
                _this.loading.loadingCount -= 1;
                if (_this.loading.loadingCount === 0) {
                    _this.loading.status = false;
                }
            }
        }

    },
};
</script>

<style lang="scss"></style>